import { useEffect, useState } from "react"
import { topDownload } from "../../api/data-api"
import { timeStdFormat } from "../dash-board/DashBoard"
import BaseChart from "../../components/data-visiable/BaseChart"
import { Card } from "antd";

export default function DownloadTop(props){
  
  const [condition, setCondition] = useState({
    startTime: "2020-1-1",
    endTime: timeStdFormat(new Date()),
    type: "计算机"
  })

  const [option, setOption] = useState(null)

  const loadData = (param)=>{
    if(!param) {param = {}}
    const requestParam = {
      ...condition,
      ...param
    }
    topDownload(requestParam).then(
      resp=>{
        const data = resp.data.data
        updateOption(data)
      }
    )
  }

  const updateOption = (data)=>{
    const newOption = {
      dataset: {
        dimensions: ['title', 'downloadCount'],
        source: data
      },
      legend: {
        show: true
      },
      tooltip: {
        trigger: 'item'
      },
      xAxis: {
        type: 'category',
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '下载次数',
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        },
      ]
    };
    setOption(newOption)
  }

  useEffect(()=>{
    loadData()
  }, [])

  return <>
    <Card title={"下载次数TOP100"}>
      <BaseChart options={option}></BaseChart>
    </Card>
  </>
}